<template>
  <div
    style="background:skyblue;height:100vh;dispalat:flex;align-items:center;justify-content:center;overflow: hidden; "
  >
    <el-form
      style="width:600px;height:300px;background-color:#fff;padding:50px 70px 0 0;margin: auto; margin-top:150px;"
      :model="ruleForm"
      :rules="rules"
      status-icon
      ref="loginForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h1 style="margin-top:20px">万润达后台管理</h1>
      <el-form-item label="帐号" prop="username" style="margin-top:20px">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handle_login"
          style="width:300px; letter-spacing:10px"
        >登&nbsp;录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        pwd: ""
      },
      rules: {
        username: [{ required: true, message: "请输入帐号", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    handle_login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$message({
            showClose: true,
            message: "登陆成功",
            type: "success",
            duration: 500,
            onClose: () => {
              this.$router.push("/");
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "请完整输入",
            type: "warning"
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style  scoped>
</style>